<template>
	<div class="main">
		<div class="main-cent">
			<keep-alive><component v-bind:is="curtTabItem"></component></keep-alive>
		</div>
		<div class="main-nav">
			<van-tabbar @change="onChange" v-model="active">
				<van-tabbar-item icon="search" v-for="item in naxArr" :key="item.name">
					<span>{{ item.name }}</span>
					<template #icon="props">
						<img :src="props.active ? item.iconAct : item.icon" />
					</template>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
import HomePage from './vessel/HomePage';
import MarketValue from './vessel/MarketValue';
import MyCenter from './vessel/MyCenter';
export default {
	components: {
		HomePage,
		MarketValue,
		MyCenter
	},
	created() {
		if (localStorage.getItem('viewType')) this.onChange(Number(localStorage.getItem('viewType')));
	},
	data() {
		return {
			active: 0,
			naxArr: [
				{
					name: '首页',
					icon: require(`@/assets/images/icon_index.png`),
					iconAct: require(`@/assets/images/icon_index_act.png`)
				},
				{
					name: '走势',
					icon: require(`@/assets/images/icon_gp.png`),
					iconAct: require(`@/assets/images/icon_gp_act.png`)
				},
				{
					name: '我的',
					icon: require(`@/assets/images/icon_cen.png`),
					iconAct: require(`@/assets/images/icon_cen_act.png`)
				}
			],
			curtTabItem: 'HomePage'
		};
	},
	methods: {
		onChange(index) {
			this.active = index;
			this.curtTabItem = index === 0 ? 'HomePage' : index === 1 ? 'MarketValue' : 'MyCenter';
			// this.$route.meta.title = index === 0 ? '首页' : index === 1 ? '走势' : '个人中心'
			document.title = index === 0 ? '首页' : index === 1 ? '走势' : '个人中心'
			localStorage.setItem('viewType', index);
		}
	}
};
</script>
<style lang="less" scoped>
.main {
	.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.main-cent {
	}
	.main-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
}
</style>
<style>
.main-nav .van-tabbar-item__text {
	font-size: 0.35rem;
	font-weight: 500;
}
.main-nav .van-tabbar-item__icon img {
	width: 0.6rem;
	height: 0.6rem;
}
.main-nav .van-tabbar {
	height: 54px;
}
</style>
